<%@page import="com.jhs.kjs.model.UserModel"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/top.jsp" %>
<form id="userForm" name="userForm" method="post">
	<div class="sub">
		<div class="sub_left">
			<div class="left_tit">
				<img src="${imgUrl}/left_tit.jpg" border="0" />
			</div>
			<ul>
				<c:forEach var = "menu" items="${menuList}">
					<li><a href="#" onClick="goBoardListMain(<c:out value="${menu.menuIndex}" />)"><c:out value="${menu.menuName}" /></a></li>				
				</c:forEach>
			</ul>
		</div>
		<div class="sub_content">
			<div class="title">
				<div class="tit"><img src="${imgUrl}/join_tit.jpg" border="0" /></div>
				<div class="home">HOME > <font color="#4a7ed5">회원가입</font></div>
			</div>
			<div class="content">
				<div class="bg_top"></div>
				<div class="join2">
					<table border="0" cellspacing="0" cellpadding="0" width="677" align="center">
						<tr>
							<td><img src="${imgUrl}/join2_t1.jpg" border="0" /></td>
						</tr>
						<tr>
							<td height="11"></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#d6d6d6" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">아이디</td>
							<td class="c1"><input type="text" id="userId" name="userId"/>&nbsp;&nbsp;<font color="#aaaaaa">* 영문자, 숫자, _ 만 입력 가능. 최소 <%=UserModel.minimumId %>자이상 입력하세요.</font></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">패스워드</td>
							<td class="c1"><input type="password" id="userPw" name="userPw"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">패스워드 확인</td>
							<td class="c1"><input type="password" id="userPw2" name="userPw2"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">이름</td>
							<td class="c1"><input type="text" id="userName" name="userName"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<!-- <tr>
							<td class="t1" width="130" height="65" bgcolor="#fafafa">별명</td>
							<td class="c1"><input type="text" id="" /><br /><font color="#e07677">* 공백없이 한글,영문,숫자만 입력 가능 (한글2자, 영문4자 이상)<br />별명을 바꾸시면 앞으로 60일 이내에는 변경 할 수 없습니다.</font></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr> -->
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">휴대폰번호</td>
							<td class="c1"><select id="cell1" name="cell1">
							<option>010</option>
							<option>011</option>
							<option>016</option>
							<option>017</option>
							<option>018</option>
							<option>019</option>
							</select> - <input type="text" id="cell2" name="cell2"style="width:40px;"/> - <input type="text" id="cell3" style="width:40px;" name="cell3"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">E-mail</td>
							<td class="c1"><input type="text" id="email" name="email"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<!-- <tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">메일링서비스</td>
							<td class="c2"><input type="checkbox" id="" /> 정보 메일을 받겠습니다.</td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">정보공개</td>
							<td class="c2"><input type="checkbox" id="" /> 다른분들이 나의 정보를 볼 수 있도록 합니다.</td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr> -->
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">자동등록방지</td>
							<td class="c3"><img id="spamFilterImg" src="${imgUrl}/capcha/<c:out value='${spamFree }'/>.png" border="0" style="vertical-align:middle;"/> <input type="text" id="secureCode" name="secureCode"/> <a href="#" onclick="reloadSpam()">새로고침</a></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#d6d6d6" colspan="2"></td>
						</tr>
					</table>
				</div>
				<div class="bg_bottom"></div>
				<div class="btn">
					<a href="#" onclick="sendUserInfo();"><img src="${imgUrl}/join_btn_ok2.jpg" border="0" /></a>
					<a href="#"><img src="${imgUrl}/join_btn_no.jpg" border="0" /></a>
				</div>
			</div>
		</div>
	</div>
	</form>
	<form  id="frm" name="frm" method="post" style="display:none;">
	<input type="text" name="menuIndex" id="menuIndex">	
	</form>
	<script type="text/javascript">
	function sendUserInfo(){
		var minimumPw = '<%=UserModel.minimumPw %>';
		minimumPw*=1;
		minimumPw = minimumPw||7;
		var minimumId = '<%=UserModel.minimumId %>';
		minimumId*=1;
		minimumId = minimumId||3;
		var userId = $('#userId').val().trim();
		
		if(userId==''){
			alert('아이디를 넣어주세요.');
			return;
		}
		if(userId.length<minimumId){
			alert('아이디를 최소 '+minimumId+' 자리이상 넣어주세요.');
			return;
		}
		
		if($('#userPw').val().trim()==''){
			alert('비밀번호를 넣어주세요.');
			return;
		}
		if(checkId(userId)){
			alert("아이디는 영어와 숫자만 됩니다.");
			return;
		}
		if($('#userPw').val().trim().length<minimumPw){
			alert('비밀번호를 최소 '+minimumPw+' 자리이상 넣어주세요.');
			return;
		}
		if($('#userPw').val()!=$('#userPw2').val()){
			alert('비밀번호가 일치하지 않습니다.');
			return;
		}
		if($('#userName').val().trim()==''){
			alert('이름을 넣어주세요.');
			return;
		}
		if($('#userName').val().trim()==$('#userPw').val()){
			alert('아이디와 패쓰워드가 동일합니다.');
			return;
		}
		if($('#email').val().trim()==''){
			alert('E-mail을 넣어주세요.');
			return;
		}
		var $form = $('#userForm');
		$form.attr('action', '/user/join3');
		$form.submit();
	}
	var checkId = function(id){
		var regExp = /\w/g;
		if(id.replace(regExp,'').replace(/_/g, '').length>0){
			return true;
		}
		return false;
	};
	
	var reloadSpam = function(){

		var url="/user/reloadSpamFilter.json";
		
		AjaxPost(url, function(data){
			$('#spamFilterImg').attr('src','${imgUrl}/capcha/'+data.spamFree+'.png');			
		});
	};
	
	function goBoardListMain(type) {		
		$("#menuIndex").val(type);
		var url = "/board/boardListMain";	
		
		$("#frm").attr("action", url);
		$("#frm").attr("method", "post");
		$("#frm").submit();		
		
		
		return false;
  }
	</script>
<%@ include file="/WEB-INF/views/include/bottom.jsp" %>